<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input v-model="form.keyword" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="问题类型">
        <el-select v-model="form.type" placeholder="请选择" clearable>
          <el-option
            v-for="item in type"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
            v-for="item in status_data"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="提交日期:">
        <el-date-picker
          v-model="public_time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="get_question_list">查询</el-button>
      </el-form-item>
    </el-form>

    <Total :total="number" tooltipContent="" :isShow="false" class="mt-10px" />

    <el-table :data="lists" border stripe class="mt-20px">
      <el-table-column type="expand" label="详情" width="80px">
        <template #default="props">
          <div class="text-18px ml-50px line-height-40px">
            <p>手机: {{ props.row.phone }}</p>
            <p>邮箱: {{ props.row.email }}</p>
            <p>回复: {{ props.row.answer }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100px" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="question" label="内容" />
      <el-table-column prop="status" label="状态" width="100px">
        <template #default="scoped">
          <div>{{ feedback_status[scoped.row["status"]] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="问题类型" width="120px" />

      <el-table-column prop="date" label="提交日期" width="120px" />
      <el-table-column prop="status" label="操作" width="160px">
        <template #default="scoped">
          <el-button
            type="success"
            text
            :disabled="scoped.row.status === '2'"
            @click="operation(scoped.row.id, '2')"
            >完成</el-button
          >
          <el-button
            type="danger"
            text
            :disabled="scoped.row.status === '3'"
            @click="operation(scoped.row.id, '3')"
            >撤销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="operation_dialog" title="操作" width="30%">
      <div>
        <el-input
          v-model="info.remark"
          placeholder="备注"
          class="mb-20px"
        ></el-input>
        <el-input v-model="info.answer" placeholder="咨询回答"></el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-pagination
      v-if="number !== 0"
      class="flex flex-justify-center my-30px"
      background
      layout="prev, pager, next"
      :total="number"
      :page-size="10"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessage, dayjs } from "element-plus";
import { status_data, feedback_status, type } from "./data.config";
import { operation_help, question_list } from "@/api/back/feedback";

const public_time = ref(["", ""]);
const lists = ref([]);
const number = ref(0);
const operation_dialog = ref(false);
const info = reactive({
  id: "",
  operation: "",
  remark: "",
  answer: "",
});

const form = reactive({
  keyword: "",
  type: "",
  status: "",
  client_type: "",
  start_date: "",
  end_date: "",
  page: 1,
  page_size: 10,
});

watch(
  () => public_time.value,
  (val) => {
    if (val) {
      public_time.value = val;
      form.start_date = dayjs(val[0]).format("YYYY-MM-DD");
      form.end_date = dayjs(val[1]).format("YYYY-MM-DD");
    } else {
      public_time.value = val;
      form.start_date = "";
      form.end_date = "";
      get_help_list();
    }
  }
);

// 分页处理
const handleCurrentChange = (val: number) => {
  form.page = val
  get_question_list()
  document.querySelector('html').scrollTop = 0
}

const cancel = async () => {
  operation_dialog.value = false;
  info.remark = "";
  info.answer = "";
};

const submit = async () => {
  const { code } = await operation_help(info);
  if (code === 200) {
    ElMessage.success("提交成功.");
    operation_dialog.value = false;
    info.remark = "";
    info.answer = "";
    get_question_list();
  } else {
    ElMessage.error("提交失败！");
  }
};
const operation = async (id, status) => {
  info.id = id;
  get_question_list();
  info.operation = status;
  operation_dialog.value = true;
};

const get_question_list = async () => {
  const {
    data: { data, total },
  } = await question_list(form);

  lists.value = data;
  number.value = total;
};
get_question_list();
</script>

<style scoped lang="scss">
:deep .el-table .el-table__cell {
  font-size: 16px !important;
}
:deep .el-form-item__label {
  font-size: 16px;
  line-height: 30px;
}
</style>
